import React, { useEffect, useRef, useState } from 'react'
import { ArrowLeft } from '@react-vant/icons';
import './motion.css'
import { useNavigate } from 'react-router-dom';
import * as echarts from 'echarts';

export default function Motion() {
  const [list,setList]=useState(['日','周','月'])
  const [num,setNum]=useState(0)
  const Navigate=useNavigate()
  const chartRef = useRef(null);
  const chartRef1 = useRef(null);

  const bar1=(option)=>{
    var myChart = echarts.init(chartRef.current);

    option && myChart.setOption(option);
  }

  const bar2=(option)=>{
    var myChart = echarts.init(chartRef.current);
    option && myChart.setOption(option);
  }

  useEffect(()=>{
    var option = {
      title: {
        text:"2024年6月22日",
        left: "center",
        textStyle: {
          color: "green",
        }
      },
      xAxis: {
        type: 'category',
        data: [20, , 21, , 22, , 23, , '24/06'],
        axisLabel: {
          formatter: function(value,index){
            const showIndexes = [0,2,4,6,8];
            return showIndexes.includes(index) ? `${value}` : '';
          }
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [70, 45, 65, 63, 68, {value:61,itemStyle:{color:'white'}}, {value:49,itemStyle:{color:'white'}}, {value:57,itemStyle:{color:'white'}}, {value:60,itemStyle:{color:'white'}}],
          type: 'bar',
          barWidth: "20%",
          itemStyle: {
            borderRadius: [10, 10, 0, 0],
            color: "green"
          }
        }
      ]
    };
    bar1(option)
  },[])

  const up=(i)=>{
    setNum(i)
    if(i===0){
      var option = {
        title: {
          text:"2024年6月22日",
          left: "center",
          textStyle: {
            color: "green",
          }
        },
        xAxis: {
          type: 'category',
          data: [20, , 21, , 22, , 23, , '24/06'],
          axisLabel: {
            formatter: function(value,index){
              const showIndexes = [0,2,4,6,8];
              return showIndexes.includes(index) ? `${value}` : '';
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [70, 45, 65, 63, 68, {value:61,itemStyle:{color:'white'}}, {value:49,itemStyle:{color:'white'}}, {value:57,itemStyle:{color:'white'}}, {value:60,itemStyle:{color:'white'}}],
            type: 'bar',
            barWidth: "20%",
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: "green"
            }
          }
        ]
      };
        bar1(option)
    }else if(i===1){
      var option = {
        title: {
          text:"6月 第4周",
          left: "center",
          textStyle: {
            color: "green",
          }
        },
        xAxis: {
          type: 'category',
          data: [20, , 21, , 22, , 23, , '24/06'],
          axisLabel: {
            formatter: function(value,index){
              const showIndexes = [0,2,4,6,8];
              return showIndexes.includes(index) ? `${value}` : '';
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [75, 40, 50, 60, 62, {value:45,itemStyle:{color:'white'}}, {value:40,itemStyle:{color:'white'}}, {value:51,itemStyle:{color:'white'}}, {value:67,itemStyle:{color:'white'}}],
            type: 'bar',
            barWidth: "20%",
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: "green"
            }
          }
        ]
      };
        bar1(option)
    }else if(num===2){
        
    }
  }


  return (
    <div className='Motion'>
      <div className='motion-head'>
        <span className='motion-head-bor'><ArrowLeft onClick={()=>{Navigate('/target')}} /></span>
        <span>距离</span>
        <span></span>
      </div>

      <div className='motion-content'>
        <div className='motion-content-bor'>
            <div className='motion-con'>
                {list.map((item,i)=>{
                    return(<span className={i===num?'motion-con-green':'motion-con-gre'} key={i} onClick={()=>{up(i)}}>{item}</span>)
                })}
            </div>

            <div ref={chartRef} className='motion-bar'></div>

            <div className='motion-mileage'>
                <div>
                    <p style={{color:'#797979'}}>距离</p>
                    <p>0.0 km</p>
                </div>
                <div style={{textAlign:"right"}}>
                    <p style={{color:'#797979'}}>燃烧的卡路里</p>
                    <p>0 kcal</p>
                </div>
            </div>

            <div className='motion-foot'>
                <button>编辑目标</button>
            </div>
        </div>
      </div>
    </div>
  )
}
